<template>
  <div class="contract-form-container">
    <el-steps :active="activeStep" finish-status="success" simple>
      <el-step title="基础信息"></el-step>
      <el-step title="参与方信息"></el-step>
      <el-step title="合同条款"></el-step>
      <el-step title="确认信息"></el-step>
    </el-steps>

    <div class="form-content">
      <!-- 第一步：基础信息 -->
      <div v-show="activeStep === 0">
        <h3>基础信息</h3>
        <el-form :model="form" label-width="120px">
          <el-form-item label="房源地址" prop="propertyAddress">
            <el-autocomplete
                v-model="form.propertyAddress"
                :fetch-suggestions="querySearch"
                placeholder="请输入房源地址"
                style="width: 400px"
                @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>

          <el-form-item label="交易类型" prop="transactionType" required>
            <el-radio-group v-model="form.transactionType">
              <el-radio label="rent">租赁</el-radio>
              <el-radio label="sale">买卖</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="价格" prop="price" required>
            <el-input-number
                v-model="form.price"
                :precision="2"
                :min="0"
            ></el-input-number>
            <span class="unit">{{ form.transactionType === 'rent' ? '元/月' : '万元' }}</span>
          </el-form-item>
        </el-form>
      </div>

      <!-- 第二步：参与方信息 -->
      <div v-show="activeStep === 1">
        <h3>参与方信息</h3>
        <el-tabs v-model="activePartyTab">
          <el-tab-pane label="租客/买家" name="tenant">
            <el-form :model="form.tenantInfo" label-width="120px">
              <el-form-item label="姓名" prop="name" required>
                <el-input v-model="form.tenantInfo.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="phone" required>
                <el-input v-model="form.tenantInfo.phone" placeholder="请输入联系电话"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idNumber" required>
                <el-input v-model="form.tenantInfo.idNumber" placeholder="请输入身份证号"></el-input>
              </el-form-item>
              <el-form-item label="联系地址" prop="address">
                <el-input v-model="form.tenantInfo.address" placeholder="请输入联系地址"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="房东/卖家" name="landlord">
            <el-form :model="form.landlordInfo" label-width="120px">
              <el-form-item label="姓名" prop="name" required>
                <el-input v-model="form.landlordInfo.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="phone" required>
                <el-input v-model="form.landlordInfo.phone" placeholder="请输入联系电话"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idNumber" required>
                <el-input v-model="form.landlordInfo.idNumber" placeholder="请输入身份证号"></el-input>
              </el-form-item>
              <el-form-item label="联系地址" prop="address">
                <el-input v-model="form.landlordInfo.address" placeholder="请输入联系地址"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 第三步：合同条款 -->
      <div v-show="activeStep === 2">
        <h3>合同条款</h3>
        <el-form :model="form" label-width="120px">
          <el-form-item label="押金(元)" prop="deposit">
            <el-input-number
                v-model="form.deposit"
                :precision="2"
                :min="0"
                controls-position="right"
            ></el-input-number>
            <span v-if="form.transactionType === 'rent'" class="tip-text">
              (通常为{{ form.price ? form.price + '元' : '' }}的{{ depositRatio }}倍)
            </span>
          </el-form-item>

          <el-form-item
              v-if="form.transactionType === 'rent'"
              label="租金涨幅规则"
              prop="rentIncreaseRule"
          >
            <el-input
                v-model="form.rentIncreaseRule"
                type="textarea"
                :rows="2"
                placeholder="例如：每年上涨5%或根据市场价调整"
                style="width: 400px"
            ></el-input>
          </el-form-item>

          <el-form-item label="合同期限" prop="contractPeriod">
            <el-date-picker
                v-model="form.contractPeriod"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="违约责任" prop="breachOfContract">
            <el-input
                v-model="form.breachOfContract"
                type="textarea"
                :rows="3"
                placeholder="详细描述违约责任条款"
                style="width: 500px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <!-- 第四步：确认信息 -->
      <div v-show="activeStep === 3">
        <h3>确认合同信息</h3>
        <div class="summary-container">
          <div class="summary-section">
            <h4>基础信息</h4>
            <p><span class="label">房源地址:</span> {{ form.propertyAddress }}</p>
            <p><span class="label">交易类型:</span> {{ form.transactionType === 'rent' ? '租赁' : '买卖' }}</p>
            <p><span class="label">价格:</span> {{ form.price }} {{ form.transactionType === 'rent' ? '元/月' : '万元' }}</p>
          </div>

          <div class="summary-section">
            <h4>参与方信息</h4>
            <p><span class="label">租客/买家:</span> {{ form.tenantInfo.name }} ({{ form.tenantInfo.phone }})</p>
            <p><span class="label">身份证号:</span> {{ form.tenantInfo.idNumber }}</p>
            <p><span class="label">联系地址:</span> {{ form.tenantInfo.address }}</p>

            <p><span class="label">房东/卖家:</span> {{ form.landlordInfo.name }} ({{ form.landlordInfo.phone }})</p>
            <p><span class="label">身份证号:</span> {{ form.landlordInfo.idNumber }}</p>
            <p><span class="label">联系地址:</span> {{ form.landlordInfo.address }}</p>
          </div>

          <div class="summary-section">
            <h4>合同条款</h4>
            <p><span class="label">押金:</span> {{ form.deposit }} 元</p>
            <p v-if="form.rentIncreaseRule"><span class="label">租金涨幅规则:</span> {{ form.rentIncreaseRule }}</p>
            <p><span class="label">合同期限:</span> {{ form.contractPeriod ? form.contractPeriod.join(' 至 ') : '未设置' }}</p>
            <p><span class="label">违约责任:</span> {{ form.breachOfContract || '未设置' }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="form-actions">
      <el-button @click="prevStep" v-if="activeStep > 0">上一步</el-button>
      <el-button type="primary" @click="nextStep" v-if="activeStep < 3">下一步</el-button>
      <el-button type="success" @click="submitForm" v-if="activeStep === 3">提交合同</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

const activeStep = ref(0)
const activePartyTab = ref('tenant')

// 房源数据
const propertyList = ref([
  { value: '北京市朝阳区建国路88号SOHO现代城A座1001', rentPrice: 8500, salePrice: 680 },
  { value: '上海市浦东新区陆家嘴环路1000号环球金融中心3205', rentPrice: 18000, salePrice: 1350 },
  { value: '广州市天河区珠江新城华夏路8号', rentPrice: 12000, salePrice: 960 },
  { value: '深圳市南山区科技园科苑路15号', rentPrice: 15000, salePrice: 1200 },
  { value: '杭州市西湖区文三路369号', rentPrice: 8000, salePrice: 650 },
  { value: '成都市武侯区人民南路四段3号', rentPrice: 6000, salePrice: 500 }
])

const form = reactive({
  propertyAddress: '',
  transactionType: 'rent',
  price: null,
  deposit: null,
  rentIncreaseRule: '',
  contractPeriod: [],
  breachOfContract: '',
  tenantInfo: {
    name: '',
    phone: '',
    idNumber: '',
    address: ''
  },
  landlordInfo: {
    name: '',
    phone: '',
    idNumber: '',
    address: ''
  }
})

// 计算押金倍数
const depositRatio = computed(() => {
  return form.transactionType === 'rent' ? (form.price ? Math.round(form.deposit / form.price) : 1) : 0
})

// 搜索房源建议
const querySearch = (queryString, cb) => {
  const results = queryString
      ? propertyList.value.filter(item =>
          item.value.toLowerCase().includes(queryString.toLowerCase()))
      : propertyList.value
  cb(results)
}

// 选择房源后自动填充价格
const handleSelect = (item) => {
  form.price = form.transactionType === 'rent' ? item.rentPrice : item.salePrice
}

const nextStep = () => {
  if (activeStep.value === 0 && (!form.propertyAddress || !form.price)) {
    ElMessage.error('请填写完整的基础信息')
    return
  }
  if (activeStep.value === 1 && (!form.tenantInfo.name || !form.tenantInfo.phone || !form.tenantInfo.idNumber ||
      !form.landlordInfo.name || !form.landlordInfo.phone || !form.landlordInfo.idNumber)) {
    ElMessage.error('请填写完整的参与方信息')
    return
  }
  activeStep.value++
}

const prevStep = () => {
  activeStep.value--
}

const submitForm = () => {
  ElMessage.success('合同提交成功')
  // 重置表单
  activeStep.value = 0
  form.propertyAddress = ''
  form.transactionType = 'rent'
  form.price = null
  form.deposit = null
  form.rentIncreaseRule = ''
  form.contractPeriod = []
  form.breachOfContract = ''
  form.tenantInfo = {
    name: '',
    phone: '',
    idNumber: '',
    address: ''
  }
  form.landlordInfo = {
    name: '',
    phone: '',
    idNumber: '',
    address: ''
  }
}
</script>

<style scoped>
.contract-form-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-content {
  margin: 30px 0;
  min-height: 400px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.summary-container {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
}

.summary-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.summary-section h4 {
  margin-bottom: 10px;
  color: #409eff;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.summary-section p {
  margin: 8px 0;
  line-height: 1.6;
}

.summary-section .label {
  display: inline-block;
  width: 120px;
  color: #666;
  font-weight: bold;
}

.unit {
  margin-left: 10px;
  color: #666;
}

.tip-text {
  margin-left: 10px;
  font-size: 12px;
  color: #999;
}

.el-tabs {
  margin-top: 20px;
}
</style>